<template>
    <div class="table-box" id="tableBox">
        <!-- 查询 -->
        <slot name="search">
        </slot>
        <div class="table-wrap">
            <el-table :data="tableData" v-loading="isloading" @row-click="onRowClick" style="width: 100%"
                :max-height="maxHeight" :row-class-name="tableRowClassName" border>
                <!-- 是否可展开 -->
                <el-table-column v-if="props.expand" type="expand">
                    <template #default="scope">
                        <slot name="expand" :row="scope.row" />
                    </template>
                </el-table-column>
                <!-- 序号 -->
                <el-table-column type="index" label="序号" :index="indexMethod" width="80" align="center" />

                <!-- 动态列 -->
                <el-table-column v-for="item in props.tableColumn" :prop="item.prop" :label="item.label" align="center"
                    :width="item.width">

                    <!-- 列的内容插槽 -->
                    <template v-if="item.slot" #default="scope">
                        <slot :name="item.prop" :row="scope.row" />
                    </template>

                    <!-- 二级表头 -->
                    <template v-if="item.children && item.children.length > 0">
                        <el-table-column v-for="child in item.children" :prop="child.prop" :label="child.label"
                            align="center" />
                    </template>
                </el-table-column>


            </el-table>
        </div>
        <!-- 分页 -->
        <el-pagination class="paginStyle" v-model:current-page="props.params.pagenum"
            v-model:page-size="props.params.pagesize" :page-sizes="props.size" :background="true"
            layout="prev, pager, next,sizes,total" :total="total" @size-change="handlePageAndSize"
            @current-change="handlePageAndSize" />
    </div>

</template>

<script setup>
const props = defineProps({
    // 表头
    tableColumn: {
        type: Array,
        default: () => {
            return []
        }
    },
    // 请求入参
    params: {
        type: Object,
        default: () => {
            return {}
        }
    },
    // 是否可以展开
    expand: {
        type: Boolean,
        default: false
    },
    // table的数据，改成组件内部的了
    tableData: {
        type: Array,
        default: () => {
            return []
        }
    },
    // 分页对象配置项
    paginOption: {
        type: Object,
        default: () => {
            return {}
        }
    },
    // 最大高度
    maxHeight: {
        type: String,
        default: "600"
    },
    //页码
    size: {
        type: Array,
        default: () => ([10, 20, 30])
    },
    //请求接口
    fetchApi: {
        type: Function,
        default: {}
    }
})

//rowClick 行点击
const emit = defineEmits(['rowClick', 'getData'])
function onRowClick(row) {
    emit('rowClick', row)
}

// 表格的数据逻辑
const tableData = ref([])
const isloading = ref(true)
const total = ref(0)
function fetchList() {
    // 请求loading
    isloading.value = true
    let { params, paginOption, fetchApi } = props
    fetchApi(Object.assign(params, paginOption)).then(res => {
        if (res.code == 200) {
            isloading.value = false
            tableData.value = res.data.list
            total.value = res.data.total
            // 将查询到的数据暴露出去
            emit("getData", res.data.list)
            computedHeight()
        }
    })
}

// 索引
function indexMethod(index) {
    return index + 1
}
// 表格某行的样式
const tableRowClassName = ({ row, rowIndex }) => {
    if (rowIndex % 2 == 0) {
        return ''
    } else {
        return 'hasBg'
    }
}

//分页和页码改变回调
function handlePageAndSize(size) {
    fetchList()
}
defineExpose({
    fetchList
})

//计算最大高度
function computedHeight() {
    maxHeight.value = document.getElementById('tableBox').clientHeight - document.querySelectorAll('.form-box')[0].clientHeight - 60
}
const maxHeight = ref(600)
onMounted(() => {
    window.addEventListener('resize', computedHeight)
    fetchList()
})

onUnmounted(() => {
    window.removeEventListener('resize', computedHeight)
})

</script>

<style>
.table-box {
    position: relative;
    height: 100%;
}

.table-wrap {

    /* max-height: 700px; */
    border-radius: 8px 8px 0px 0px;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid rgba(31, 197, 242, 1) !important;
}

.el-table .hasBg {
    --el-table-tr-bg-color: rgba(242, 251, 254, 1);
}

.rowClick .el-table__row {
    cursor: pointer;
}

.el-table th.el-table__cell {
    background: rgba(84, 199, 244, 0.5) !important;
    box-shadow: inset -1px 0px 0px rgba(31, 197, 242, 1) !important;
    border-right: rgba(84, 199, 244, 0.5) !important;
    border-bottom: 1px solid rgba(84, 199, 244, 0.5) !important;
    color: rgba(51, 51, 51, 1);
}

.el-table thead.is-group th.el-table__cell {
    background: rgba(84, 199, 244, 0.5) !important;
    box-shadow: inset -1px 0px 0px rgba(31, 197, 242, 1) !important;
}

.el-table--border .el-table__cell {
    border: 0;
}


.el-pagination button {
    border-radius: 4px;
}

.el-pagination ul>li {
    border-radius: 4px;
}


.paginStyle {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
</style>